<template>
  <div class="scene-into">
    <div class="chose-course-top">
      <div class="header-left">
        <span class="back-arrow" @click="quitStudy"></span>
      </div>
      <div class="course-title">
        {{ this.reverseStatus.name }}
      </div>
      <div class="btn-group">
        <a @click="goSkill">考点解读</a>
      </div>
    </div>
    <div class="scene-content">
      <div class="tabs-wrap">
        <a-tabs type="card" v-model="tabKey">
          <a-tab-pane :key="1" tab="">
            <Step1
              :renderData="sentenceList"
              :sentenceCurrent="sentenceCurrent"
              @changeTab="changeTab"
              :tabKey="tabKey"
            ></Step1>
          </a-tab-pane>
          <a-tab-pane :key="2" tab="">
            <Step2
              :renderData="sentenceList"
              :sentenceCurrent="sentenceCurrent"
              @changeTab="changeTab"
              :tabKey="tabKey"
            ></Step2>
          </a-tab-pane>
          <a-tab-pane :key="3" tab="">
            <Step3
              :renderData="sentenceList"
              :sentenceCurrent="sentenceCurrent"
              @changeTab="changeTab"
              :tabKey="tabKey"
            ></Step3>
          </a-tab-pane>
          <a-tab-pane :key="4" tab="">
            <Step4
              :renderData="sentenceList"
              :sentenceCurrent="sentenceCurrent"
              @changeTab="changeTab"
              :tabKey="tabKey"
            ></Step4>
          </a-tab-pane>
          <a-tab-pane :key="5" tab="">
            <Step5
              :renderData="sentenceList"
              :sentenceCurrent="sentenceCurrent"
              @changeTab="changeTab"
              :tabKey="tabKey"
            ></Step5>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { Howler } from "howler";
// import { fetchRatioSentence } from "@/services/reverse";
// import { SUCCESS_CODE } from "@/utils/const";
import { Tabs } from "ant-design-vue";
import Timetips from "@/components/Timetips";
import { Step1, Step2, Step3, Step4, Step5 } from "./index.js";
export default {
  components: {
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
    Step1,
    Step2,
    Step3,
    Step4,
    Step5,
    Timetips
  },
  data() {
    return {
      tabKey: 1,
    };
  },
  computed: {
    ...mapState({
      reverseStatus: (state) => state.reverseStatus,
      sentenceList: (state) => state.sentenceList,
      sentenceCurrent: (state) => state.sentenceCurrent,
    }),
  },
  watch: {},
  methods: {
    ...mapMutations(["setSentenceList", "setGrammarExplain"]),
    // fetchSentenceList() {
    //   fetchRatioSentence({
    //     chapter_id: this.reverseStatus.chapters_id,
    //     curr_id: this.reverseStatus.curr_id,
    //   }).then((res) => {
    //     if (res.code === SUCCESS_CODE) {
    //       this.setSentenceList(res.data);
    //     }
    //   });
    // },
    goSkill() {
      this.setGrammarExplain(true);
    },
    changeTab(cmd) {
      switch (cmd) {
        case "next":
          this.tabKey = this.tabKey + 1;
          break;
        case "pre":
          this.tabKey = this.tabKey - 1;
          break;
      }
    },
    quitStudy() {
      this.$yxpConfirm({
        msg: "是否退出本句学习",
      })
        .then(() => {
          this.$router.push({
            path: "/reverse/grammar-sentence",
          });
        })
        .catch(() => {});
    },
  },
  created() {
    // this.fetchSentenceList()
  },
  mounted() {

  },
  beforeRouteLeave(to, from, next) {
    // ...
    console.log(222222);
    Howler.stop();
    if (to.name !== "grammar-explain") {
      console.log("111");
      this.$forceUpdate();
      from.meta.keepAlive = false;
      next();
    } else {
      from.meta.keepAlive = true;
      next();
    }
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {
    Howler.stop();
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
  destroyed() {},
  activated() {},
};
</script>
<style lang="less" scope>
/* @import url(); 引入公共css类 */
@import url("./index.less");
</style>
